<template>
	<view class="container">
		<view class="header">
			<text class="welcome">欢迎回来</text>
			<text class="tip">请选择您要登录的系统</text>
		</view>

		<view class="tenant-list">
			<view v-for="(tenant, index) in tenantList" :key="index" class="tenant-card" :class="['tenant-card-' + index]"
				@click="selectTenant(tenant.id)">
				<view class="card-left">
					<view class="tenant-icon">
						<image src="/static/tenant-icon.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="card-right">
					<text class="tenant-name">{{ tenant.name }}</text>
					<text class="tenant-status">正常使用中</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getByUserTenant
	} from '@/api/login.js'

	export default {
		name: 'SelectTenant',
		data() {
			return {
				tenantList: [],
				loginForm: {}
			}
		},
		onLoad(options) {
			const parsedData = JSON.parse(decodeURIComponent(options.loginForm));
			this.loginForm = parsedData;
		},
		async mounted() {
			let {
				data
			} = await getByUserTenant(this.loginForm.username);
			this.tenantList = data;
		},
		methods: {
			selectTenant(id) {
				this.$store.commit('SET_TENANT', id);
				// 执行登录
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.loginSuccess()
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetPickUpStoreInfo').then(res => {
					if (Array.isArray(res) && res.length > 0) {
						this.$store.commit('SET_SELECTEDSTORE', {
							name: res[0].name,
							id: res[0].id,
							logo: res[0].logo
						});
					} else {
						console.warn("GetPickUpStoreInfo 返回的数据无效或为空");
					}
					this.$store.dispatch('GetInfo').then(res => {
						//跳转到动态菜单第一个页面
						this.$tab.reLaunch(this.$store.getters.menu[0].path);
					})
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.container {
		min-height: 100vh;
		padding: 40rpx 32rpx;
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4fa 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		text-align: center;
		margin-bottom: 80rpx;

		.welcome {
			display: block;
			font-size: 48rpx;
			color: #2c3e50;
			font-weight: 600;
			margin-bottom: 16rpx;
		}

		.tip {
			font-size: 28rpx;
			color: #7f8c8d;
		}
	}

	.tenant-list {
		width: 100%;
		max-width: 600rpx;
	}

	.tenant-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 24rpx rgba(143, 156, 170, 0.08);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.98);
			background: #f8f9fa;
		}

		&::after {
			content: '';
			position: absolute;
			right: 32rpx;
			height: 24rpx;
			width: 24rpx;
			border: 4rpx solid #3498db;
			border-radius: 50%;
		}
	}

	.card-left {
		margin-right: 24rpx;

		.tenant-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: #3498db20;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.card-right {
		flex: 1;
		display: flex;
		flex-direction: column;

		.tenant-name {
			font-size: 34rpx;
			color: #2c3e50;
			font-weight: 500;
			margin-bottom: 8rpx;
		}

		.tenant-status {
			font-size: 24rpx;
			color: #95a5a6;
		}
	}
</style>